<template>
	<div>
		<nut-form label-position="top" ref="formData1Ref" :model-value="formData1" :rules="rules">
			<nut-form-item :label="t('input_label_new_password')" prop="new_password">
				<nut-input v-model="formData1.new_password" :placeholder="t('placeholder_label_new_password')" :type="eyeOpen1 ? 'text' : 'password'">
					<template #right>
						<iconpark-icon
							@click="eyeOpen1 = !eyeOpen1"
							color="#A8A8CA"
							:icon-id="eyeOpen1 ? 'show' : 'hide'"
							size="1.3rem"
							class="mr-12"
						></iconpark-icon>
					</template>
				</nut-input>
			</nut-form-item>
			<nut-form-item :label="t('input_label_confirm_new_password')" prop="new_password_confirm">
				<nut-input
					v-model="formData1.new_password_confirm"
					:placeholder="t('placeholder_label_confirm_new_password')"
					:type="eyeOpen2 ? 'text' : 'password'"
				>
					<template #right>
						<iconpark-icon
							@click="eyeOpen2 = !eyeOpen2"
							color="#A8A8CA"
							:icon-id="eyeOpen2 ? 'show' : 'hide'"
							size="1.3rem"
							class="mr-12"
						></iconpark-icon>
					</template>
				</nut-input>
			</nut-form-item>
		</nut-form>
		<div class="submit_wrap">
			<nut-button class="submit" @click="submit">{{ t('btn_label_submit') }}</nut-button>
		</div>
	</div>
</template>
<script setup>
import { ref } from 'vue';
import { verifyPassword } from '@/utils/validateTools';
import { passwordValidator, changePassword } from '../../commonHooks';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const props = defineProps({
	formData: {
		type: Object,
		default: () => ({}),
	},
	type: {
		type: String,
		default: '',
	},
});
const eyeOpen1 = ref(false);
const eyeOpen2 = ref(false);
const formData1Ref = ref(null);
const formData1 = ref({
	new_password: '',
	new_password_confirm: '',
});

const passwordValidator1 = (val) => {
	if (!val) {
		return Promise.reject(t('home_page_enterPassword'));
	} else if (!verifyPassword(val)) {
		return Promise.reject(t('home_page_passwordFormatIncorrect'));
	} else if (val != formData1.value.new_password) {
		return Promise.reject(t('home_page_passwordsInconsistent'));
	} else {
		return Promise.resolve();
	}
};

const rules = {
	new_password: [{ validator: passwordValidator }],
	new_password_confirm: [{ validator: passwordValidator1 }],
};

// 发送
const submit = () => {
	formData1Ref.value?.validate().then(({ valid, errors }) => {
		if (valid) {
			const params = {
				modify_type: props.type == 'email' ? 3 : 2,
				...formData1.value,
				...props.formData,
			};

			changePassword(params, 2, props.type);
		} else {
			console.warn('error:', errors);
		}
	});
};
</script>

<style lang="scss" scoped>
.submit_wrap{
	bottom:25px !important
}


</style>
